<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="咨询建议"
      title-color="#000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <u-action-sheet :list="list" v-model="show" @click="click($event)"></u-action-sheet>
    <view class="content">
      <view class="between-row">
        <view>* 咨询建议类型</view>
        <view @click="show = true;">{{form.type || '请选择 >'}}</view>
      </view>
      <view class="between-row">
        <view>* 联系人</view>
        <view>
          <u-input v-model="form.username" />
        </view>
      </view>
      <view class="between-row">
        <view>* 联系方式</view>
        <view>
          <u-input v-model="form.phone" />
        </view>
      </view>
      <view>
        <view>* 咨询建议详情</view>
        <view style="margin-top: 20rpx;">
          <u-input v-model="form.content" border type="textarea" />
        </view>
      </view>
    </view>
    <view class="btn" @click="submit">提交</view>
  </view>
</template>

<script>
import { addAdvice } from '../../api/system/api'
export default {
  data() {
    return {
      userInfo: {},
      form: {
        type: '',
        username: '',
        phone: '',
        content: '',
      },
      show: false,
      list: [
        {
          text: '咨询',
        },
        {
          text: '建议',
        }
      ]
    };
  },
  onLoad(option) {
    this.userInfo = JSON.parse(option.userInfo)
  },
  methods: {
    submit() {
      if (Object.values(this.form).length !== Object.values(this.form).filter(v => v).length) {
        this.$refs.uToast.show({
          title: "请填写必填项~",
          type: "error",
        });
        return
      }
      addAdvice({
        ...this.form,
        state: '待处理',
        userId: this.userInfo.id
      }).then(res => {
        if (res.code == 200) {
          this.$refs.uToast.show({
            title: "提交成功",
            type: "success",
          });
          uni.switchTab({ url: `/pages/user/center` });
        }
      })
    },
    click(v) {
      this.form.type = this.list[v].text
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;

  .img {
    width: 40rpx;
    height: 40rpx;
  }
}



.top {
  width: 100%;
  padding-top: 2vh;

  .header {
    display: flex;
    align-items: center;
    padding: 30rpx;

    .avatar {
      width: 140rpx;
      height: 140rpx;
      line-height: 140rpx;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      margin-right: 30rpx;
    }

    .unlogin .avatar {
      background: #7d8e8e;
    }
  }
}
.btn {
  position: fixed;
  bottom: 30rpx;
  width: 96%;
  left: 2%;
  height: 80rpx;
  text-align: center;
  background: red;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 80rpx;
  border-radius: 80rpx;
}
.between-row {
  width: 100%;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content {
  padding: 30rpx;
}
</style>
